<template>
  <div>
    <el-dialog
      title="新建项目"
      :visible.sync="dialogVisible"
      width="860px"
      :append-to-body="true"
      :close-on-click-modal="false"
      :before-close="handleClose">
      <el-form v-if="steps === 1" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">
        <el-form-item label="项目名称" prop="cProNme">
          <el-input v-model="ruleForm.cProNme" placeholder="请输入项目名称"></el-input>
        </el-form-item>
        <el-form-item label="项目编码" prop="cProNo">
          <el-input v-model="ruleForm.cProNo" placeholder="请输入项目编码"></el-input>
        </el-form-item>
        <el-form-item label="项目负责人" prop="cProHead">
          <el-select v-model="ruleForm.cProHead" placeholder="请选择项目负责人" style="width: 100%">
            <el-option v-for="item in cProHeadOption" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="使用角色" prop="cUseRoles">
          <el-input v-model="ruleForm.cUseRoles" placeholder="请输入使用角色"></el-input>
        </el-form-item>
        <el-form-item label="业务负责人" prop="cBusHead">
          <el-select v-model="ruleForm.cBusHead" placeholder="请选择业务负责人" style="width: 100%">
            <el-option v-for="item in cProHeadOption" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="技术负责人" prop="cTechHead">
          <el-select v-model="ruleForm.cTechHead" placeholder="请选择技术负责人" style="width: 100%">
            <el-option v-for="item in cProHeadOption" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="测试负责人" prop="cTestHead">
          <el-select v-model="ruleForm.cTestHead" placeholder="请选择测试负责人" style="width: 100%">
            <el-option v-for="item in cProHeadOption" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="运维负责人" prop="cOmHead">
          <el-select v-model="ruleForm.cOmHead" placeholder="请选择运维负责人" style="width: 100%">
            <el-option v-for="item in cProHeadOption" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="计划开始时间" prop="startTime" class="special">
          <el-date-picker
            v-model="startTime"
            style="width: 100%"
            @change="handelTime"
            type="datetime"
            placeholder="请选择计划开始时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="计划完成时间" prop="endTime" class="special">
          <el-date-picker
            v-model="endTime"
            @change="handelTime"
            style="width: 100%"
            type="datetime"
            placeholder="请选择计划完成时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="项目描述" prop="cPrdDes">
          <el-input type="textarea" v-model="ruleForm.cPrdDes" placeholder="请输入项目描述"  :rows="6"></el-input>
        </el-form-item>
      </el-form>
      <div v-else class="container">
        <div class="left">
          <span class="title">选择成员:</span>
          <el-input
            class="input"
            placeholder="查找用户名、角色"
            prefix-icon="el-icon-search"
            @blur="query"
            clearable
            v-model="queryName">
          </el-input>
          <el-tree
            :data="treeData"
            show-checkbox
            ref="tree"
            v-loading="treeLoding"
            node-key="postId"
            :props="{label: 'postName', children: 'users'}"
            @check-change="handleCheckChange">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span v-if="node.level == 1" style="font-weight: 700">{{ data.postName }}</span>
                <span v-else>
                  <span class="icon-name red" v-if="data.postName">{{ data.postName[data.postName.length - 1] }}</span>
                  <span>{{ data.postName }}</span>
                  <el-tag v-if="data.creator" type="info" class="creatorTab">项目创建人</el-tag>
                </span>
              </span>
          </el-tree>
        </div>
        <div class="right">
          <div class="top">
            <span class="l">已选（共 {{ selectTotal }} 个成员）</span>
            <span class="r" @click="clearTree">
              <i class="el-icon-delete" style="margin-right: 5px"></i>清空
            </span>
          </div>
          <div class="list">
            <div class="item" v-for="(item, index) in selectTree" :key="index">
              <span class="icon-name red">{{ item[1].postName[item[1].postName.length - 1] }}</span>
              <span>{{ item[1].postName }}</span>
              <el-tag v-if="item[1].creator" type="info" class="creatorTab">项目创建人</el-tag>
              <i class="el-icon-error deleteIcon" @click="deleteMember(item[1])"></i>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer" v-if="steps === 1">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="next">下一步</el-button>
      </span>
      <span slot="footer" class="dialog-footer" v-else>
        <el-button @click="back">上一步</el-button>
        <el-button type="primary" @click="done">完成</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {postTree, pro} from "@/api/projectManage/project";
import {mixin} from "@/views/projectManage/mixin";


export default {
  name: "newProject",
  mixins: [mixin],
  data() {
    return {
      dialogVisible: false,
      ruleForm: {},
      rules: {
        cProNme: [
          { required: true, message: '请输入项目名称', trigger: 'blur' },
        ],
        cProNo: [
          { required: true, message: '请输入项目编码', trigger: 'blur' },
        ],
        cTechHead: [
          { required: true, message: '请选择技术负责人', trigger: 'change' },
        ],
        cUseRoles: [
          { required: true, message: '请选择使用角色', trigger: 'change' },
        ],
        cBusHead: [
          { required: true, message: '请选择业务负责人', trigger: 'change' },
        ],
        cTestHead: [
          { required: true, message: '请选择负责人', trigger: 'change' },
        ],
        cProHead: [
          { required: true, message: '请选择负责人', trigger: 'change' },
        ],
        cOmHead: [
          { required: true, message: '请选择负责人', trigger: 'change' },
        ],
      },
      queryName: '',
      steps: 1,
      props: {
        label: 'name',
        children: 'zones'
      },
      treeData: [],
      selectTree: new Map,
      selectTotal: 0,
      treeLoding: false
    }
  },
  methods: {
    query() {
      this.getTree()
    },
    // 关闭
    handleClose() {
      this.dialogVisible = false
      this.steps = 1
      this.startTime = ''
      this.endTime = ''
      this.$refs['ruleForm'].resetFields();
      this.ruleForm = {}
    },
    // 获取人员树
    getTree() {
      this.treeLoding = true
      postTree({
        userName: this.queryName
      }).then(res => {
        this.treeData = res
      }).finally(() => this.treeLoding = false)
    },
    // 打开弹窗
    open() {
      this.getTree()
      this.getMember()
      this.dialogVisible = true
    },
    // 完成
    done() {
      this.ruleForm.cPrdPer = [...this.selectTree.keys()].join(',')
      // 默认项目状态未开始
      this.ruleForm.cDemState = '1'
      pro(this.ruleForm).then(res => {
        this.$notify({title: '成功', message: '新建项目成功！', type: 'success',});
        this.$emit('upDate')
        this.dialogVisible = false
        this.ruleForm = {}
        this.back()
      }).catch(() => this.$message.error('新建项目失败!'))

    },
    // 下一步
    next() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.steps = 2
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 上一步
    back() {
      this.steps = 1
      this.selectTree.clear()
      this.selectTotal = 0
    },
    handleCheckChange(data, checked, indeterminate) {
      // 选中父级
      if (data.users && !indeterminate) {
        data.users.forEach(item => {
          checked ? this.selectTree.set(item.postId, item) : this.selectTree.delete(item.postId)
        })
      }
      // 选中子级
      else {
        checked ? this.selectTree.set(data.postId, data) : this.selectTree.delete(data.postId)
      }
      this.selectTotal = this.selectTree.size
    },
    clearTree() {
      this.$nextTick(() => {
        this.$refs.tree.setCheckedKeys([])
        this.selectTree.clear()
        this.selectTotal = 0
      })
    },
    deleteMember(item) {
      this.$nextTick(() => {
        this.$refs.tree.setChecked(item.postId, false)
        this.selectTree.delete(item.postId)
        this.selectTotal = this.selectTree.size
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 0 10px;
}
.demo-ruleForm {
  padding: 20px 50px 20px 20px;
}
.creatorTab {
  margin-left: 10px;
  border-radius: 50px;
}
.container {
  display: flex;
  min-height: 400px;
  overflow-y: auto;
  .left, .right {
    width: 50%;
    padding: 20px 30px 20px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  .left {
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    .title {
      font-weight: 700;
    }
    .input {
      margin: 10px 0;
    }
    .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
    }
  }
  .right {
    .top {
      font-weight: 700;
      height: 35px;
      .l {
        float: left;
      }
      .r {
        float: right;
        cursor: pointer;
      }
    }
    .list {
      .item {
        position: relative;
        margin: 3px 0;
        .deleteIcon {
          position: absolute;
          top: 2px;
          right: 5px;
          font-size: 23px;
          color: #989797;
          cursor: pointer;
        }
      }
    }

  }
}
</style>
